<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>影视详情</title>
    <meta charset="utf-8">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet"media="all"/>
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet"/>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="box_1">
    <jsp:include page="common/header.jsp"></jsp:include>
    <div style="text-align: center"><%--https://v.qq.com/x/cover/m441e3rjq9kwpsc.html--%>
        <iframe id="playbox" src="https://api.sigujx.com/?url=${first}" allowtransparency="true"
                allowfullscreen="true">
        </iframe>
    </div>
    <div class="video_detail">
        <div class="detail_left">
            <div class="video_title">
                <span>${video.title}</span>
            </div>
            <div>
                <a href="#">
                    <img src="${video.image}"></a></div>
                </a>
        </div>
        <c:if test="${empty zyk}">
            <div class="detail_right">
                <div class="t1">
                    导演：${video.director}
                </div>
                <div class="t1">
                    主演：${video.actor}
                </div>
                <div class="t1">
                    类型：${video.category}
                </div>
                <div class="t1">
                    地区：${video.area}
                </div>
                <div class="t1">
                    评分：${video.score}
                </div>
                <div class="t1">
                    年份：${video.year}
                </div>
                <div class="t1">
                    详情：${video.detail}
                </div>
            </div>
        </c:if>
    </div>
    <div class="player-list">
        <div>
            <span style="font-size: 20px;color: #ff5722;">在线播放</span>
        </div>
        <div>
                <c:forEach items="${map_url}" var="item" >
                    <span class="player_url"><%--http://jqaaa.com/jx.php?url--%>

                        <a href="#"  name="${ item.value}" onclick="player('${item.value}')">${ item.key}</a>
                    </span>
                </c:forEach>
        </div>
    </div>
    <div style="height: 6px"></div>
    <div class="foot_1">
        <div class="foot_1" style="text-align: center">
            <div style="margin: 6px 0;padding-top: 40px;">
                <p class="text-center"><span style="color:#000;text-align:center;font-size: 16px">本网站内容收集于互联网，七日影视不承担任何由于内容的合法性及健康性所引起的争议和法律责任<br>
                    Copyright ©&nbsp; 七日工作室 版权所有</span></p>
            </div>
        </div>
    </div>

</div>
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    function getTop() {
        var mytop = $(document).scrollTop();
        if (mytop > 500) {
            $(".zdy_nav").css({
                'display': 'block',
                'top': 0,
            });
        } else {
            $(".zdy_nav").css('display', 'none');
        }
        setTimeout(getTop);
    }
    getTop();
    var pageurl=document.getElementById("pageurl").value;
    function player(url){
        $("#playbox").attr("src","https://api.sigujx.com/?url="+url);
    }


    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });

    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '720px'
            ,height: '250px'
            ,interval: 3000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });

</script>
</body>
</html>
